<template>
    <div class="dashboard-container">
      <!-- 产品展示区块 -->
      <div class="section-title">
        <el-icon><Box /></el-icon>
        <h2>我们的产品</h2> &emsp14;&emsp14;&emsp14; <font style="color: red;" @click="goTo"><a href="http://localhost:5173/websocket">聊天室</a></font>
        <el-divider />
      </div>
  
      <el-row :gutter="20" class="product-row">
        <el-col 
          v-for="product in products" 
          :key="product.id"
          :xs="24" :sm="12" :md="8"
        >
          <el-card class="product-card" shadow="hover">
            <div class="product-badge" v-if="product.hot">
              <el-tag type="danger" effect="dark">热门</el-tag>
            </div>
            <div class="product-header">
              <el-icon size="40" :color="product.color"><component :is="product.icon" /></el-icon>
              <h3>{{ product.name }}</h3>
            </div>
            <p class="product-desc">{{ product.desc }}</p>
            
            <el-divider />
            
            <ul class="product-features">
              <li v-for="(feature, index) in product.features" :key="index">
                <el-icon><Check /></el-icon>
                {{ feature }}
              </li>
            </ul>
            
            <div class="product-footer">
              <div class="price">{{ product.price }}</div>
              <el-button 
                type="primary" 
                round 
                @click="navigateTo(product.path)"
                class="product-btn"
              >
                立即体验
                <el-icon><Right /></el-icon>
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 客户案例区块 -->
      <div class="section-title">
        <el-icon><Trophy /></el-icon>
        <h2>成功案例</h2>
        <el-divider />
      </div>
  
      <el-carousel :interval="5000" height="300px" class="case-carousel">
        <el-carousel-item v-for="item in cases" :key="item.id">
          <div class="case-item">
            <div class="case-content">
              <h3>{{ item.company }}</h3>
              <el-tag type="info">{{ item.industry }}行业</el-tag>
              <p class="case-solution">使用方案：{{ item.solution }}</p>
              <p class="case-effect">实施效果：{{ item.effect }}</p>
              <el-button 
                type="success" 
                plain 
                @click="navigateTo(item.path)"
                class="case-btn"
              >
                查看详情
                <el-icon><ArrowRightBold /></el-icon>
              </el-button>
            </div>
            <div class="case-logo">
              <el-avatar :size="100" :src="item.logo" />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import {
    Box, Trophy, Check, Right, ArrowRightBold,
    User, Lock, Monitor, Coin, Notebook, FirstAidKit
  } from '@element-plus/icons-vue'

  const goTo = (path) => {
      useRouter().push(path)
  }
  
  const router = useRouter()
  
  // 产品数据
  const products = ref([
    {
      id: 1,
      name: '智能认证系统',
      desc: '基于AI的人脸识别与实名认证解决方案，提供安全可靠的身份验证服务',
      features: [
        '活体检测技术',
        '身份证OCR识别',
        '1:N人脸比对',
        '防照片/视频攻击'
      ],
      price: '¥1999/年起',
      hot: true,
      path: '/products/auth',
      icon: 'User',
      color: '#409EFF'
    },
    {
      id: 2,
      name: '数据安全网关',
      desc: '企业级数据安全防护系统，保障核心数据资产安全',
      features: [
        '数据透明加密',
        '精细化访问控制',
        '完整行为审计',
        '实时风险预警'
      ],
      price: '¥2999/年起',
      path: '/products/security',
      icon: 'Lock',
      color: '#67C23A'
    },
    {
      id: 3,
      name: '云身份管理平台',
      desc: '统一身份认证与权限管理系统，实现企业身份治理',
      features: [
        '单点登录(SSO)',
        '多因素认证(MFA)',
        '细粒度权限管理',
        '合规审计报表'
      ],
      price: '¥3999/年起',
      path: '/products/iam',
      icon: 'Monitor',
      color: '#E6A23C'
    }
  ])
  
  // 客户案例数据
  const cases = ref([
    {
      id: 1,
      company: '招商银行',
      industry: '金融',
      solution: '智能认证系统+数据安全网关',
      effect: '认证效率提升80%，欺诈风险降低95%，通过金融行业认证',
      logo: 'https://example.com/bank-logo.png',
      path: '/cases/bank'
    },
    {
      id: 2,
      company: '清华大学',
      industry: '教育',
      solution: '云身份管理平台',
      effect: '实现全校10万师生统一身份认证，集成30+校园应用',
      logo: 'https://example.com/school-logo.png',
      path: '/cases/university'
    },
    {
      id: 3,
      company: '协和医院',
      industry: '医疗',
      solution: '数据安全网关',
      effect: '满足等保三级要求，保护300万+患者隐私数据，实现零泄露',
      logo: 'https://example.com/hospital-logo.png',
      path: '/cases/hospital'
    }
  ])
  
  // 跳转方法
  const navigateTo = (path) => {
    router.push(path)
  }
  </script>
  
  <style scoped>
  .dashboard-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .section-title {
    text-align: center;
    margin: 40px 0 20px;
    color: #333;
  }
  .section-title h2 {
    display: inline-block;
    margin: 0 15px;
    font-size: 28px;
  }
  .section-title .el-icon {
    font-size: 28px;
    vertical-align: middle;
  }
  
  /* 产品卡片样式 */
  .product-row {
    margin-bottom: 40px;
  }
  .product-card {
    height: 100%;
    position: relative;
    transition: transform 0.3s;
    border-radius: 12px;
  }
  .product-card:hover {
    transform: translateY(-5px);
  }
  .product-badge {
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .product-header {
    text-align: center;
    padding: 20px 0;
  }
  .product-header h3 {
    margin: 10px 0 5px;
    font-size: 20px;
  }
  .product-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    min-height: 60px;
  }
  .product-features {
    padding: 0;
    list-style: none;
    min-height: 150px;
  }
  .product-features li {
    padding: 8px 0;
    color: #555;
  }
  .product-features .el-icon {
    color: #67C23A;
    margin-right: 8px;
  }
  .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }
  .price {
    font-size: 18px;
    font-weight: bold;
    color: #F56C6C;
  }
  .product-btn {
    padding: 10px 20px;
  }
  
  /* 案例轮播样式 */
  .case-carousel {
    margin-bottom: 50px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .case-item {
    display: flex;
    height: 100%;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }
  .case-content {
    flex: 1;
    padding-right: 30px;
  }
  .case-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
  }
  .case-solution {
    font-size: 16px;
    color: #555;
    margin: 15px 0;
  }
  .case-effect {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .case-btn {
    padding: 10px 25px;
  }
  .case-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
  }
  </style>